import React, {Component} from 'react'
import Dragula from 'react-dragula';


import styles from  './index.scss'

let dragula = Dragula()
    // .on('drag', function (el) {
    //     console.log("drag  ==  drag", el);
    // }).on('over', function (el, container) {
    //     console.log("over  ==  over", el);
    // }).on('out', function (el, container, source) {
    //     console.log("out  ==  out", el, " ", container, "  ", source);
    //
    // })
    .on('drop', function (el, target, source, sibling) {
        console.log("drop  ==  drop===el===", el);
        console.log("drop  ==  drop===target===", target);
        console.log("drop  ==  drop===source===", source);
        console.log("drop  ==  drop===sibling===", sibling);


        console.log("drop  ==  drop===source.className===", source.className, "  source.childContext===", source.childNodes);
        let sourceNodes = source.childNodes;
        for (let node of sourceNodes){

            console.log("node.getAttribute====", node.getAttribute("name"));
            console.log("node.textContent====", node.textContent);

        };


    }).on('dragend', function (el) {
        console.log("dragend  ==  dragend", el);
    });


export default class Page2 extends Component {

    dragulaDecorator = (componentBackingInstance) => {
        if (componentBackingInstance) {
            dragula.containers.push(componentBackingInstance);
        }
    }

    render() {
        return (
            <div>
                <table>
                    <thead>
                        <tr>
                            <td>序号</td>
                            <td>第一列</td>
                            <td>第二列</td>
                            <td>第三列</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div className={styles.dragulaChild}>1</div>
                                <div className={styles.dragulaChild}>2</div>
                                <div className={styles.dragulaChild}>3</div>
                                <div className={styles.dragulaChild}>4</div>
                                <div className={styles.dragulaChild}>5</div>
                                <div className={styles.dragulaChild}>6</div>
                                <div className={styles.dragulaChild}>7</div>
                            </td>
                            <td>
                                <div className={styles.dragulaChild}>AAA</div>
                                <div className={styles.dragula + " 111"} ref={this.dragulaDecorator}>
                                    <div className={styles.dragulaChild}>BBB</div>
                                    <div className={styles.dragulaChild}>CCC</div>
                                    <div className={styles.dragulaChild}>DDD</div>
                                    <div className={styles.dragulaChild}>EEE</div>
                                    <div className={styles.dragulaChild}>FFF</div>
                                    <div className={styles.dragulaChild}>GGG</div>
                                </div>
                            </td>
                            <td >
                                <div className={styles.dragulaChild}>111</div>
                                <div className={styles.dragula + " 222"} ref={this.dragulaDecorator}>
                                    <div className={styles.dragulaChild}>222</div>
                                    <div className={styles.dragulaChild}>333</div>
                                    <div className={styles.dragulaChild}>444</div>
                                    <div className={styles.dragulaChild}>555</div>
                                    <div className={styles.dragulaChild}>666</div>
                                    <div className={styles.dragulaChild}>777</div>
                                </div>
                            </td>
                            <td>
                                <div className={styles.dragulaChild}>~~~</div>
                                <div className={styles.dragula + " 333"} ref={this.dragulaDecorator}>
                                    <div name="100" className={styles.dragulaChild}>!!!</div>
                                    <div name="200" className={styles.dragulaChild}>@@@</div>
                                    <div name="300" className={styles.dragulaChild}>###</div>
                                    <div name="400" className={styles.dragulaChild}>$$$</div>
                                    <div name="500" className={styles.dragulaChild}>%%%</div>
                                    <div name="600" className={styles.dragulaChild}>^^^</div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        );
    }
}